{% extends 'base.html' %}

{% block title %}资产管理 - 固定资产管理系统{% endblock %}

{% block extra_css %}
<style>
/* 自定义样式 */
.asset-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-radius: 15px;
}

.search-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: none;
    transition: all 0.3s ease;
}

.search-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.view-toggle {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 0.25rem;
    display: inline-flex;
}

.view-toggle .btn {
    border: none;
    background: transparent;
    color: #6c757d;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.view-toggle .btn.active {
    background: white;
    color: #495057;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.asset-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: none;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.asset-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.asset-card-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.asset-card-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: rgba(255,255,255,0.1);
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

.asset-card:hover .asset-card-header::before {
    right: -30%;
}

.asset-card-body {
    padding: 1.5rem;
}

.asset-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.asset-info-item:hover {
    background: #f8f9fa;
}

.asset-info-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    font-size: 0.9rem;
}

/* 统一为 Bootstrap 徽章风格：删除自定义 status-badge 系列，改用 .badge + 语义色 */

.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-action {
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-action::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.btn-action:hover::before {
    left: 100%;
}

.table-modern {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.table-modern thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.table-modern tbody tr {
    transition: all 0.3s ease;
}

.table-modern tbody tr:hover {
    background: #f8f9fa;
    transform: scale(1.01);
}

.stats-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: none;
}

.stats-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.stats-number {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.fade-in {
    animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.loading-spinner {
    display: none;
    text-align: center;
    padding: 2rem;
}

.confirm-modal .modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.confirm-modal .modal-header {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: white;
    border-radius: 15px 15px 0 0;
}

@media (max-width: 768px) {
    .asset-card {
        margin-bottom: 1rem;
    }
    
    .search-card {
        padding: 1rem;
    }
    
    .action-buttons {
        justify-content: center;
    }
}
</style>
{% endblock %}

{% block content %}
<!-- 页面头部 -->
<div class="asset-header text-center">
    <div class="container">
        <h1 class="mb-3"><i class="fas fa-cubes me-3"></i>资产管理中心</h1>
        <p class="lead mb-4">智能化资产管理，让每一份资产都发挥最大价值</p>
        <div class="row justify-content-center">
            <div class="col-md-2 col-6">
                <div class="stats-card">
                    <div class="stats-number text-primary">{{ page_obj.paginator.count }}</div>
                    <div class="text-muted">总资产</div>
                </div>
            </div>
            <div class="col-md-2 col-6">
                <div class="stats-card">
                    <div class="stats-number text-success">{{ in_use_count|default:0 }}</div>
                    <div class="text-muted">在用</div>
                </div>
            </div>
            <div class="col-md-2 col-6">
                <div class="stats-card">
                    <div class="stats-number text-secondary">{{ idle_count|default:0 }}</div>
                    <div class="text-muted">闲置</div>
                </div>
            </div>
            <div class="col-md-2 col-6">
                <div class="stats-card">
                    <div class="stats-number text-warning">{{ maintenance_count|default:0 }}</div>
                    <div class="text-muted">维修中</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 搜索和筛选卡片 -->
<div class="search-card">
    <form method="get" id="searchForm">
        <div class="row align-items-end">
            <div class="col-lg-3 col-md-6 mb-3">
                <label class="form-label fw-bold"><i class="fas fa-search me-2"></i>搜索资产</label>
                <div class="input-group">
                    <input type="text" class="form-control" name="search" placeholder="资产名称或编号..." value="{{ search_query }}" id="searchInput">
                    <button class="btn btn-outline-primary" type="submit">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
            <div class="col-lg-2 col-md-6 mb-3">
                <label class="form-label fw-bold"><i class="fas fa-tags me-2"></i>资产类别</label>
                <select class="form-select" name="category" id="categoryFilter">
                    <option value="">所有类别</option>
                    {% for category in categories %}
                        <option value="{{ category.id }}" {% if category_filter|add:"0" == category.id %}selected{% endif %}>
                            {{ category.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-lg-2 col-md-6 mb-3">
                <label class="form-label fw-bold"><i class="fas fa-info-circle me-2"></i>资产状态</label>
                <select class="form-select" name="status" id="statusFilter">
                    <option value="">所有状态</option>
                    {% for status_key, status_value in status_choices %}
                        <option value="{{ status_key }}" {% if status_filter == status_key %}selected{% endif %}>
                            {{ status_value }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <label class="form-label fw-bold"><i class="fas fa-filter me-2"></i>操作</label>
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary flex-fill">
                        <i class="fas fa-filter me-2"></i>筛选
                    </button>
                    <a href="{% url 'assets:asset_list' %}" class="btn btn-outline-secondary flex-fill">
                        <i class="fas fa-undo me-2"></i>重置
                    </a>
                </div>
            </div>
            <div class="col-lg-2 col-md-12 mb-3">
                <label class="form-label fw-bold"><i class="fas fa-plus me-2"></i>新增资产</label>
                <a href="{% url 'assets:asset_create' %}" class="btn btn-success w-100">
                    <i class="fas fa-plus me-2"></i>新增资产
                </a>
            </div>
        </div>
        
        <!-- 视图切换和排序 -->
        <div class="row align-items-center mt-3 pt-3 border-top">
            <div class="col-md-6">
                <div class="d-flex align-items-center">
                    <span class="me-3 fw-bold">视图模式：</span>
                    <div class="view-toggle">
                        <button type="button" class="btn active" id="tableViewBtn" onclick="switchView('table')">
                            <i class="fas fa-table me-2"></i>表格视图
                        </button>
                        <button type="button" class="btn" id="cardViewBtn" onclick="switchView('card')">
                            <i class="fas fa-th-large me-2"></i>卡片视图
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <div class="d-flex align-items-center justify-content-end">
                    <span class="me-3 fw-bold">排序：</span>
                    <select class="form-select" style="width: auto;" name="sort" id="sortSelect">
                        <option value="-created_at">最新创建</option>
                        <option value="name">名称 A-Z</option>
                        <option value="-name">名称 Z-A</option>
                        <option value="purchase_date">启用日期升序</option>
                        <option value="-purchase_date">启用日期降序</option>
                        <option value="purchase_price">价格升序</option>
                        <option value="-purchase_price">价格降序</option>
                    </select>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- 加载动画 -->
<div class="loading-spinner" id="loadingSpinner">
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">加载中...</span>
    </div>
    <p class="mt-2 text-muted">正在加载资产数据...</p>
</div>
 
<!-- 列表与卡片视图 -->
<div class="container fade-in">
    <!-- 表格视图 -->
    <div id="tableView" class="table-modern mb-4">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="text-white">
                    <tr>
                        <th style="width: 14%">资产编号</th>
                        <th style="width: 22%">资产名称</th>
                        <th style="width: 12%">类型</th>
                        <th style="width: 10%">状态</th>
                        <th style="width: 12%">使用人</th>
                        <th style="width: 12%">部门</th>
                        <th style="width: 10%">启用日期</th>
                        <th style="width: 18%" class="text-end">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for asset in page_obj %}
                    <tr>
                        <td><span class="badge bg-info text-dark">{{ asset.asset_number }}</span></td>
                        <td><strong>{{ asset.name }}</strong></td>
                        <td><span class="badge bg-secondary">{{ asset.category.name|default:"-" }}</span></td>
                        <td>
                            {% if asset.status == 'in_use' %}
                                <span class="badge bg-primary">在用</span>
                            {% elif asset.status == 'idle' %}
                                <span class="badge bg-success">闲置</span>
                            {% elif asset.status == 'maintenance' %}
                                <span class="badge bg-warning text-dark">维修中</span>
                            {% elif asset.status == 'scrapped' %}
                                <span class="badge bg-secondary">已报废</span>
                            {% elif asset.status == 'faulty' %}
                                <span class="badge bg-danger">故障</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ asset.get_status_display }}</span>
                            {% endif %}
                        </td>
                        <td>{% if asset.user %}{{ asset.user.username }}{% else %}-{% endif %}</td>
                        <td>{{ asset.department.name|default:"-" }}</td>
                        <td>{{ asset.purchase_date|date:"Y-m-d" }}</td>
                        <td class="text-end">
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'assets:asset_detail' asset.pk %}" class="btn btn-outline-info" title="查看详情"><i class="fas fa-eye"></i></a>
                                <a href="{% url 'assets:asset_update' asset.pk %}" class="btn btn-outline-primary" title="编辑"><i class="fas fa-edit"></i></a>
                                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" title="更多操作"><i class="fas fa-ellipsis-h"></i></button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item" href="{% url 'assets:asset_qr_code' asset.pk %}"><i class="fas fa-qrcode me-2"></i>二维码</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="8" class="text-center text-muted py-5"><i class="fas fa-inbox me-2"></i>暂无资产数据</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 卡片视图（默认隐藏） -->
    <div id="cardView" class="d-none">
        <div class="row g-3">
            {% for asset in page_obj %}
            <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                <div class="asset-card h-100">
                    <div class="asset-card-header d-flex justify-content-between align-items-center">
                        <span class="small text-white-50">{{ asset.category.name|default:"-" }}</span>
                        {% if asset.status == 'in_use' %}
                            <span class="badge bg-primary">在用</span>
                        {% elif asset.status == 'idle' %}
                            <span class="badge bg-success">闲置</span>
                        {% elif asset.status == 'maintenance' %}
                            <span class="badge bg-warning text-dark">维修中</span>
                        {% elif asset.status == 'scrapped' %}
                            <span class="badge bg-secondary">已报废</span>
                        {% elif asset.status == 'faulty' %}
                            <span class="badge bg-danger">故障</span>
                        {% endif %}
                    </div>
                    <div class="asset-card-body">
                        <h5 class="mb-2">{{ asset.name }}</h5>
                        <p class="mb-2"><span class="badge bg-info text-dark">{{ asset.asset_number }}</span></p>
                        <div class="row g-2 small text-muted">
                            <div class="col-6">使用人：{% if asset.user %}{{ asset.user.username }}{% else %}-{% endif %}</div>
                            <div class="col-6">部门：{{ asset.department.name|default:"-" }}</div>
                            <div class="col-12">启用：{{ asset.purchase_date|date:"Y-m-d" }}</div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <a href="{% url 'assets:asset_detail' asset.pk %}" class="btn btn-outline-primary btn-sm">查看详情</a>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'assets:asset_update' asset.pk %}" class="btn btn-outline-secondary"><i class="fas fa-edit"></i></a>
                                {% if asset.qr_code %}
                                <a href="{% url 'assets:asset_qr_code' asset.pk %}" class="btn btn-outline-info"><i class="fas fa-qrcode"></i></a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center text-muted py-5"><i class="fas fa-inbox me-2"></i>暂无资产数据</div>
            {% endfor %}
        </div>
    </div>

    <!-- 分页与跳页 -->
    {% if page_obj.has_other_pages %}
    <nav aria-label="页面导航" class="mt-3">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}"><i class="fas fa-chevron-left"></i></a></li>
            {% endif %}
            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                    <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <li class="page-item"><a class="page-link" href="?page={{ num }}{% if search_query %}&search={{ search_query }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}">{{ num }}</a></li>
                {% endif %}
            {% endfor %}
            {% if page_obj.has_next %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if category_filter %}&category={{ category_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}"><i class="fas fa-chevron-right"></i></a></li>
            {% endif %}
        </ul>
        <div class="d-flex justify-content-center mt-2">
            <div class="input-group input-group-sm" style="max-width: 260px;">
                <span class="input-group-text">跳至</span>
                <input type="number" min="1" max="{{ page_obj.paginator.num_pages }}" class="form-control" id="pageJumpInput" value="{{ page_obj.number }}">
                <span class="input-group-text">/ {{ page_obj.paginator.num_pages }}</span>
                <button class="btn btn-outline-primary" type="button" id="pageJumpBtn">前往</button>
            </div>
        </div>
    </nav>
    {% endif %}
</div>

{% endblock %}

{% block extra_js %}
<script>
// 视图切换：切换 d-none
function switchView(viewType) {
    const tableView = document.getElementById('tableView');
    const cardView = document.getElementById('cardView');
    const tableBtn = document.getElementById('tableViewBtn');
    const cardBtn = document.getElementById('cardViewBtn');
    if (!tableView || !cardView) return;
    if (viewType === 'table') {
        tableView.classList.remove('d-none');
        cardView.classList.add('d-none');
        tableBtn?.classList.add('active');
        cardBtn?.classList.remove('active');
        localStorage.setItem('assetViewModeNew', 'table');
    } else {
        tableView.classList.add('d-none');
        cardView.classList.remove('d-none');
        cardBtn?.classList.add('active');
        tableBtn?.classList.remove('active');
        localStorage.setItem('assetViewModeNew', 'card');
    }
}

document.addEventListener('DOMContentLoaded', function(){
    const saved = localStorage.getItem('assetViewModeNew');
    if (saved) { switchView(saved); }

    // 过滤器联动提交
    document.getElementById('categoryFilter')?.addEventListener('change', ()=> document.getElementById('searchForm').submit());
    document.getElementById('statusFilter')?.addEventListener('change', ()=> document.getElementById('searchForm').submit());
    document.getElementById('searchInput')?.addEventListener('keypress', function(e){ if (e.key === 'Enter'){ e.preventDefault(); document.getElementById('searchForm').submit(); }});

    // 跳页
    const jumpInput = document.getElementById('pageJumpInput');
    const jumpBtn = document.getElementById('pageJumpBtn');
    function goToPage(page) {
        if (!jumpInput) return;
        const maxPage = parseInt(jumpInput.getAttribute('max') || '1', 10);
        let target = parseInt(page, 10);
        if (isNaN(target)) return;
        if (target < 1) target = 1;
        if (target > maxPage) target = maxPage;
        const params = new URLSearchParams(window.location.search);
        params.set('page', String(target));
        window.location.search = params.toString();
    }
    if (jumpBtn && jumpInput) {
        jumpBtn.addEventListener('click', function(){ goToPage(jumpInput.value); });
        jumpInput.addEventListener('keypress', function(e){ if (e.key === 'Enter'){ e.preventDefault(); goToPage(jumpInput.value); }});
    }
});
</script>
{% endblock %}
{% endblock %}
